import defaultSettings from '@/settings';
import elementVariables from '@/styles/element-variables.scss';
import sliderVariables from '@/styles/variables.scss';
import { Dictionary } from '@/typings';
const { showSettings, showTagsView, fixedHeader, showSidebarLogo } = defaultSettings;

export interface ISettingsState {
    theme: string;
    fixedHeader: boolean;
    showSettings: boolean;
    showTagsView: boolean;
    showSidebarLogo: boolean;
    // menuBg: string // 导航栏背景颜色
    // menuText: string // 导航菜单的字体颜色
    // subMenuActiveText: string // 导航栏选中的字体颜色
    // subMenuActiveBg: string // 导航栏选中的背景颜色
    // subMenuHoverText: string // 导航栏 hover 的字体颜色
    // subMenuHoverBg: string // 导航栏 hover 的背景颜色
    themeConfig: Dictionary<string>;
    RefreshPrintListTimeTemp: number; // 刷新打印列表的时间戳
}

const state: ISettingsState = {
    theme: elementVariables.theme,
    themeConfig: {
        menuBg: sliderVariables.menuBg,
        menuText: sliderVariables.menuText,
        subMenuActiveText: sliderVariables.subMenuActiveText,
        subMenuActiveBg: sliderVariables.subMenuActive,
        subMenuHoverBg: sliderVariables.subMenuHover,
        subMenuHoverText: sliderVariables.subMenuHoverText
    },

    showSettings: showSettings,
    showTagsView: showTagsView,
    fixedHeader: fixedHeader,
    showSidebarLogo: showSidebarLogo,
    RefreshPrintListTimeTemp: new Date().getTime()
};

const mutations = {
    CHANGE_SETTING: (state: ISettingsState, { key, value }) => {
        // eslint-disable-next-line no-prototype-builtins
        if (state.hasOwnProperty(key)) {
            state[key] = value;
        }
    },
    CHANGE_SETTING_THEME: (state: ISettingsState, { key, value }) => {
        // eslint-disable-next-line no-prototype-builtins
        if (state.themeConfig.hasOwnProperty(key)) {
            state.themeConfig[key] = value;
        }
    },
    RESET_THEME: (state: ISettingsState) => {
        state.themeConfig = {
            menuBg: sliderVariables.menuBg,
            menuText: sliderVariables.menuText,
            subMenuActiveText: sliderVariables.subMenuActiveText,
            subMenuActiveBg: sliderVariables.subMenuActive,
            subMenuHoverBg: sliderVariables.subMenuHover,
            subMenuHoverText: sliderVariables.subMenuHoverText
        };
    }
};

const actions = {
    changeSetting({ commit }, data: any) {
        console.log('data', data);
        commit('CHANGE_SETTING', data);
    },
    changeThemeSetting({ commit }, data: any) {
        commit('CHANGE_SETTING_THEME', data);
    },
    resetThemeSetting({ commit }, data: any) {
        commit('CHANGE_SETTING_THEME', data);
    }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions
};
